<template>
  <div class="right-board">
    <el-tabs v-model="currentTab" class="center-tabs">
      <el-tab-pane label="配置" name="field" />
      <el-tab-pane label="数据" name="data" />
      <el-tab-pane label="参数" name="location" />
    </el-tabs>
    <div class="field-box">

      <el-scrollbar class="right-scrollbar">
        <!-- 组件属性 -->

        <el-form v-show="currentTab==='field'" size="small" label-width="90px">
          <el-collapse v-model="activeNames" accordion>

            <el-collapse-item title="图层" name="1">

              <el-form-item v-if="configData.layerName!==undefined" label="图层名称">
                <el-input v-model="configData.layerName" placeholder="请输入图层名称" />
              </el-form-item>

            </el-collapse-item>

            <el-collapse-item title="标题" name="2">

              <el-form-item v-if="configData.chartOption.title.text!==undefined" label="标题">
                <el-input v-model="configData.chartOption.title.text" placeholder="请输入标题" />
              </el-form-item>
            
              <el-form-item v-if="configData.chartOption.title.fontFamily!==undefined" label="字体">
                <el-select v-model="configData.chartOption.title.fontFamily" placeholder="请选择">
                  <el-option v-for="(item, index) in detailFamily" :key="index" :label="item" :value="item">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item v-if="configData.chartOption.title.fontSize!==undefined" label="字体大小">
                <el-slider v-model="configData.chartOption.title.fontSize" :min="0" :step="1" :max="200" show-input></el-slider>
              </el-form-item>

              <el-form-item v-if="configData.chartOption.title.fontWeight!==undefined" label="字体粗细">
                <el-select v-model="configData.chartOption.title.fontWeight" placeholder="请选择">
                  <el-option v-for="(item,index) in detailWeight" :key="index" :label="item" :value="item">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item v-if="configData.chartOption.title.color!==undefined" label="字体颜色">
                <el-color-picker v-model="configData.chartOption.title.color" show-alpha></el-color-picker>
              </el-form-item>

              <el-form-item v-if="configData.chartOption.title.top!==undefined" label="标题上边距">
                <el-slider v-model="configData.chartOption.title.top" :min="-200" :max="200" :step="1" show-input></el-slider>
              </el-form-item>

              <el-form-item v-if="configData.chartOption.title.left!==undefined" label="标题左边距">
                <el-slider v-model="configData.chartOption.title.left" :min="-200" :max="200" :step="1" show-input></el-slider>
              </el-form-item>  
            
            </el-collapse-item>

            <el-collapse-item title="表盘" name="3">

              <el-form-item v-if="configData.chartOption.progressWidth!==undefined" label="表盘宽度">
                <el-slider v-model="configData.chartOption.progressWidth" :min="0" :max="100" :step="1" show-input></el-slider>
              </el-form-item>

              <el-form-item v-if="configData.chartOption.processColor!==undefined" label="表盘颜色">
               
              </el-form-item>

              <div style="margin-bottom:20px">

                <div style="display:flex">
                  <el-form-item label="颜色(始)"></el-form-item>
                  <el-form-item label="颜色(终)" style="margin-left: 60px;"></el-form-item>
                </div>

                <div class="select-item">
                    
                    <el-color-picker v-model="configData.chartOption.processColor[0]" show-alpha style="margin-left:30px"></el-color-picker>
                    <div :style="gradientColor(configData.chartOption.processColor)"></div>
                    <el-color-picker v-model="configData.chartOption.processColor[1]" show-alpha style="margin-left:20px"></el-color-picker>
                </div>
                
              </div>
            


              <el-form-item v-if="configData.chartOption.surplusColor!==undefined" label="剩余颜色">
                <el-color-picker v-model="configData.chartOption.surplusColor" show-alpha></el-color-picker>
              </el-form-item>
            
            </el-collapse-item>

            <el-collapse-item title="刻度" name="4">

              <el-form-item v-if="configData.chartOption.splitNumber!==undefined" label="刻度数量">
                <el-slider v-model="configData.chartOption.splitNumber" :min="0" :max="200" :step="1" show-input></el-slider>
              </el-form-item>

               <el-form-item v-if="configData.chartOption.splitLineWidth!==undefined" label="刻度宽度">
                <el-slider v-model="configData.chartOption.splitLineWidth" :min="0" :max="100" :step="1" show-input></el-slider>
              </el-form-item> 

              <el-form-item v-if="configData.chartOption.splitLineColor!==undefined" label="刻度颜色">
                <el-color-picker v-model="configData.chartOption.splitLineColor" show-alpha></el-color-picker>
              </el-form-item>            
            

            </el-collapse-item>

            <el-collapse-item title="数值" name="5">

              <el-form-item v-if="configData.chartOption.isValue!==undefined" label="显示数值">
                <el-switch v-model="configData.chartOption.isValue" />
              </el-form-item>

              <el-form-item v-if="configData.chartOption.label.fontFamily!==undefined" label="字体">
                <el-select v-model="configData.chartOption.label.fontFamily" placeholder="请选择">
                  <el-option v-for="(item, index) in detailFamily" :key="index" :label="item" :value="item">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item v-if="configData.chartOption.label.fontSize!==undefined" label="字体大小">
                <el-slider v-model="configData.chartOption.label.fontSize" :min="0" :step="1" :max="200" show-input></el-slider>
              </el-form-item>

              <el-form-item v-if="configData.chartOption.label.fontWeight!==undefined" label="字体粗细">
                <el-select v-model="configData.chartOption.label.fontWeight" placeholder="请选择">
                  <el-option v-for="(item,index) in detailWeight" :key="index" :label="item" :value="item">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item v-if="configData.chartOption.label.color!==undefined" label="字体颜色">
                <el-color-picker v-model="configData.chartOption.label.color" show-alpha></el-color-picker>
              </el-form-item>

              <el-form-item v-if="configData.chartOption.offsetCenter!==undefined" label="数值左边距">
                <el-slider v-model="configData.chartOption.offsetCenter[0]" :min="-200" :max="200" :step="1" show-input></el-slider>
              </el-form-item>

              <el-form-item v-if="configData.chartOption.offsetCenter!==undefined" label="数值上边距">
                <el-slider v-model="configData.chartOption.offsetCenter[1]" :min="-200" :max="200" :step="1" show-input></el-slider>
              </el-form-item>              

            </el-collapse-item>

            <el-collapse-item title="圆环" name="6">

              <el-form-item v-if="configData.chartOption.outRadius!==undefined" label="外环内半径">
                <el-slider v-model="configData.chartOption.outRadius[0]" :min="1" :max="100" :step="1" show-input></el-slider>
              </el-form-item>

              <el-form-item v-if="configData.chartOption.outRadius!==undefined" label="外环外半径">
                <el-slider v-model="configData.chartOption.outRadius[1]" :min="1" :max="100" :step="1" show-input></el-slider>
              </el-form-item>

              <el-form-item v-if="configData.chartOption.outColor!==undefined" label="外环颜色">
                <el-color-picker v-model="configData.chartOption.outColor" show-alpha></el-color-picker>
              </el-form-item>

              <el-form-item v-if="configData.chartOption.innerRadius!==undefined" label="内环内半径">
                <el-slider v-model="configData.chartOption.innerRadius[0]" :min="1" :max="100" :step="1" show-input></el-slider>
              </el-form-item>

              <el-form-item v-if="configData.chartOption.innerRadius!==undefined" label="内环外半径">
                <el-slider v-model="configData.chartOption.innerRadius[1]" :min="1" :max="100" :step="1" show-input></el-slider>
              </el-form-item>
             
              <el-form-item v-if="configData.chartOption.innerColor!==undefined" label="内环颜色">
                <el-color-picker v-model="configData.chartOption.innerColor" show-alpha></el-color-picker>
              </el-form-item>


            </el-collapse-item>

            <el-collapse-item title="动画" name="7">
              <el-form-item v-if="configData.chartOption.animate!==undefined" label="载入动画">
                <el-select v-model="configData.chartOption.animate" placeholder="请选择">
                  <el-option v-for="item in animateOptions" :key="item.value" :label="item.label" :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-collapse-item>
          </el-collapse>

        </el-form>

        <!-- 表单属性 -->
        <el-form v-show="currentTab === 'data'" size="small" label-width="90px">

          <data-source-config :dataSourceType="configData.chartOption.dataSourceType" :customData="configData" :customId="configData.customId" 
            @changeSource="changeSource"  @changeData="changeData" :baseType="''"></data-source-config>        

          <el-form-item label="通用处理" v-if="configData.chartOption.customData!==undefined">
            <el-button type="primary" @click="editData">编辑</el-button>
          </el-form-item>

        </el-form>

        <!-- 组件位置 -->
        <el-form v-show="currentTab === 'location'" size="small" label-width="90px">
          <el-form-item label="X位置">
            <el-input-number v-model="configData.x" controls-position="right" :step="1"></el-input-number>
          </el-form-item>
          <el-form-item label="y位置">
            <el-input-number v-model="configData.y" controls-position="right" :step="1"></el-input-number>
          </el-form-item>
          <el-form-item label="宽度">
            <el-input-number v-model="configData.width" controls-position="right" :step="1"></el-input-number>
          </el-form-item>
          <el-form-item label="高度">
            <el-input-number v-model="configData.height" controls-position="right" :step="1"></el-input-number>
          </el-form-item>
        </el-form>
      </el-scrollbar>
    </div>
    <el-dialog
      title="通用处理"
      v-if="open"
      :visible.sync="open"
      width="1000px"
      hight="900px"
      append-to-body
      :close-on-click-modal="false"
    >
      <data-editor
        :key="aceKey"
        @submitData="submitData"
        @cancelData="cancelData"
        :customData="configData.chartOption.customData==undefined?'':configData.chartOption.customData"
      ></data-editor>


    </el-dialog>
  </div>
</template>

<script>

import { animateOptions } from '../../animate/animate'
import DataEditor from "@/views/tool/datav/components/config/runcode/DataEditor";
import DataSourceConfig from '@/views/tool/datav/components/config/DataConfig/DataSourceConfig'

  export default {
    components: {
      DataSourceConfig,
      DataEditor
    },
    props: ["costomData", "drawingList"],
    data() {
      return {
        detailFamily: ['宋体', '黑体', '微软雅黑', 'Digital', 'Chunkfive', 'unidreamLED', 'Arial', 'Helvetica', 'sans-serif'],
        detailWeight: ['normal', 'bold', 'bolder', 'lighter'],
        currentTab: 'field',
        configData: this.costomData,
        activeNames: ['1'],
        animateOptions,
        staticDataValue: this.costomData != null ? JSON.stringify(this.costomData.chartOption.staticDataValue) : '',
        interfaceUrl: this.costomData.chartOption.interfaceURL != '' ? this.costomData.chartOption.interfaceURL : '',
        requestParameters: this.costomData.chartOption.requestParameters != '' ? this.costomData.chartOption.requestParameters : '',
        aceKey:Math.random(),
        open:false,        
      }
    },
    //页面加载完执行
    mounted() {

    },
    computed: {

    },
    watch: {
      configData: {
        deep: true,
        handler(newVal) {
          this.$emit("costom-change", newVal);
        }
      },
      costomData: {
        deep: true,
        handler(newVal) {
          this.configData = newVal;
          this.arrName = newVal.chartOption.arrName;
          this.staticDataValue = JSON.stringify(newVal.chartOption.staticDataValue);
          this.interfaceUrl = newVal.chartOption.interfaceURL;
          this.requestParameters = newVal.chartOption.requestParameters;

        }
      }
    },
    methods: {
      changeSource(val){
        this.$set(this.configData.chartOption, 'dataSourceType', val);
      },
      changeData(val,id,type){
        if(this.configData.customId == id){
          if(type == 'static'){
            this.$set(this.configData.chartOption, 'staticDataValue', JSON.parse(val));
          }else if(type == 'url'){
            
            if(val.type == "interfaceUrl"){
              this.$set(this.configData.chartOption, 'interfaceURL', val.arr);
            }else if(val.type == "requestParameters"){
              this.$set(this.configData.chartOption, 'requestParameters', val.arr);
            }else if(val.type == "requestMethod"){
              this.$set(this.configData.chartOption, 'requestMethod', val.arr);
            }else if(val.type == "token"){
              this.$set(this.configData.chartOption, 'token', val.arr);
            }else if(val.type == "timeout"){
              this.$set(this.configData.chartOption, 'timeout', val.arr);
            }
          }else if(type == 'database'){
            this.$set(this.configData.chartOption, 'database', val.database);
            this.$set(this.configData.chartOption, 'bi', val.bi);
          }else if(type == 'form'){
            this.$set(this.configData.chartOption, 'formSource', val);
          }else if(type == 'websocket'){
              this.$set(this.configData.chartOption, 'interfaceKey', val);
          }
        }
        
      },
      gradientColor(item){
        let style = {width:'100px',height:'30px',marginLeft:'20px',background:`-webkit-linear-gradient(left, ${item[0]},${item[1]})`}
        return style
      },
      editData(){
        this.open = true;
      },
      cancelData(){
        this.open = false;
      },
      submitData(data){
        this.$set(this.configData.chartOption, 'customData', data);
        this.open = false;
      }
    }
  }
</script>

<style lang="scss" scoped>
  .select-item {
    display: flex;
    border: 1px dashed #fff;
    box-sizing: border-box;

    & .close-btn {
      cursor: pointer;
      color: #f56c6c;
    }

    & .el-input+.el-input {
      margin-left: 4px;
    }
  }

  /deep/ .select-item .el-input--medium .el-input__inner {
    height: 32px;
    width: 90px;
  }

  .el-form-item__label {
    width: 30px
  }

  .select-item+.select-item {
    margin-top: 4px;
  }

  .select-item.sortable-chosen {
    border: 1px dashed #409eff;
  }

  .select-line-icon {
    line-height: 32px;
    font-size: 22px;
    padding: 0 4px;
    color: #777;
  }

  /deep/ .center-tabs .el-tabs__item {
    width: 33%;
    text-align: center;
  }
</style>